<!-- -->
<template>
  <div class="address">
    <el-container>
      <el-header>
        <div class="leftHeader">
          <span>收货地址</span>
        </div>
        <div class="rightHeader">
          <el-button @click="dialogVisible = true" type="text"
            >添加地址</el-button
          >
          <el-dialog
            style="text-align:left"
            title="添加地址"
            :visible.sync="dialogVisible"
            width="30%"
          >
            <el-form
              :label-position="labelPosition"
              label-width="100px"
              :model="addForm"
            >
              <el-form-item label="地址">
                <el-cascader
                  v-model="addForm.address"
                  :options="provinceList"
                ></el-cascader>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="addAddress()">确 定</el-button>
            </span>
          </el-dialog>
        </div>
      </el-header>
      <el-main>
        <template>
          <el-table :data="tableData" style="width: 100%;">
            <el-table-column label="省份" prop="province"></el-table-column>
            <el-table-column label="市" prop="city"></el-table-column>
            <el-table-column
              label="街道（号码牌）"
              prop="street"
            ></el-table-column>
            <!-- <el-table-column label="是否默认地址" prop="default"></el-table-column> -->
            <!-- <el-table-column label="描述" prop="goodDescribe"></el-table-column>
            <el-table-column label="状态" prop="goodState"></el-table-column>-->
            <el-table-column width="280" label="默认地址">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isDefault"
                  auto-complete="on"
                  active-color="1"
                  :active-value="1"
                  :inactive-value="0"
                  @change="changeDefault(scope.row.id)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="
                    handleEdit(scope.$index, scope.row), (dialogVisible1 = true)
                  "
                ></el-button>

                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click.native.prevent="
                    handleDelete(scope.$index, scope.row.id)
                  "
                ></el-button>

                <el-dialog
                  title="修改地址"
                  :visible.sync="dialogVisible1"
                  width="30%"
                >
                  <el-form
                    :label-position="labelPosition"
                    label-width="80px"
                    :model="fixForm"
                  >
                    <el-form-item label="地址">
                      <el-cascader
                        v-model="fixForm.address"
                        :options="provinceList"
                      ></el-cascader>
                    </el-form-item>
                    <!-- <el-form-item label="默认地址">
                      <el-select v-model="fixForm.default" slot="prepend" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-form-item> -->
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="fixAddress(scope.row.id)"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import province from "../../backstage/backstageSystem/AddressList";
export default {
  name: "Address",
  data() {
    return {
      userId: "",
      defaultId: "",
      labelPosition: "right",
      dialogVisible: false,
      dialogVisible1: false,
      options: [
        {
          value: "是",
          label: "是"
        },
        {
          value: "否",
          label: "否"
        }
      ],
      provinceList: [],
      tableData: [],
      addForm: {
        address: [],
        // 省份
        province: "",
        // 市
        city: "",
        // 街道（号码牌）
        street: "",
        // 是否为默认地址
        isDefault: "",
        // 创建时间
        createTime: "",
        // 更新时间
        updateTime: ""
      },
      fixForm: {}
    };
  },
  created() {
    this.getAddress();
    this.provinceList = province;
  },

  components: {},

  filters: {},
  //   created(){
  //       this.getData();
  //   },

  computed: {},

  methods: {
    handleEdit(index, row) {
      console.log(index, row);
      this.fixForm = row;
    },
    handleDelete(index, id) {
      console.log(index, id);
      this.$confirm("此操作将永久删除该地址, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteAddress(index, id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 成功函数
    Success(index) {
      this.$message.success(index);
    },
    // 失败函数
    Fail(index) {
      this.$message.error(index);
    },
    // getData(){
    //     for (let index = 0; index < 10; index++) {
    //         this.tableData[index].province = "广东省";
    //         this.tableData[index].city = "东莞市";
    //         this.tableData[index].street = "松山湖";
    //         this.tableData[index].is_default=1;
    //         if(this.tableData[index].is_default===1){
    //             this.tableData[index].default="否";
    //         }
    //         this.tableData[index].create_time="yesterday";
    //         this.tableData[index].update_time="today";
    //         console.log(this.tableData[index]);
    //     }
    // }
    getAddress() {
      this.userId = sessionStorage.getItem("userId");
      this.axios
        .post("/api/address/findByUid", {
          id: this.userId
        })
        .then(res => {
          console.log(res.data);
          if (res.data.code === 200) {
            // console.log(res.data.data.list);
            this.tableData = [];
            this.tableData = res.data.data.list;
            for (let i of res.data.data.list) {
              if (i.isDefault === 1) {
                this.defaultId = i.id;
              }
            }

            console.log(this.tableData);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    addAddress() {
      if (this.addForm.address) {
        this.axios
          .post("/api/address", {
            uid: this.userId,
            province: this.addForm.address[0],
            city: this.addForm.address[1],
            street: this.addForm.address[2]
          })
          .then(res => {
            // console.log(res.data);
            if (res.data.code == 200) {
              this.Success("添加成功");
              this.dialogVisible = false;
              this.getAddress();
            }
          });
      } else {
        this.Fail("信息不足，添加失败");
      }
    },
    changeDefault(id) {
      this.axios
        .put("/api/address/setDefault", {
          oldAid: this.defaultId,
          newAid: id
        })
        .then(res => {
          // console.log(res.data);
          if (res.data.code == 200) {
            this.Success("设置成功");
            this.getAddress();
          }
        });
    },
    fixAddress(id) {
      if (this.fixForm.address) {
        this.axios
          .post("/api/address", {
            id:id,
            uid: this.userId,
            province: this.fixForm.address[0],
            city: this.fixForm.address[1],
            street: this.fixForm.address[2]
          })
          .then(res => {
            // console.log(res.data);
            if (res.data.code == 200) {
              this.Success("修改成功");
              this.dialogVisible1 = false;
              this.getAddress();
            }
          });
      } else {
        this.Fail("信息不足，添加失败");
      }
    },
    deleteAddress(index, id) {
      this.axios
        .delete("/api/address", {
          params: {
            ids: id
          }
        })
        .then(res => {
          // console.log(res);
          if (res.data.code === 200) {
            this.Success("删除成功");
            this.tableData.splice(index, 1);
            this.getAddress();
          } else {
            this.Fail("删除失败");
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>
<style scoped>
.address {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  padding: 0;
}
.address::-webkit-scrollbar {
  display: none;
}
.el-container {
  width: 100%;
  height: 100%;
  /* background-color: black; */
}
.el-main {
  width: 100%;
  height: 95%;
  /* background-color: black; */
}
.el-header {
  width: 100%;
  height: 5%;
  /* background-color: rebeccapurple; */
}
.leftHeader {
  width: 70%;
  height: 100%;
  float: left;
  text-align: left;
  line-height: 60px;
}
.rightHeader {
  width: 30%;
  height: 100%;
  float: right;
  line-height: 60px;
  /* padding-right: 0; */
  /* text-align: right; */
}
.rightHeader .el-button {
  margin-right: 1%;
  /* float: right; */
  /* line-height: 60px; */
}
.el-dialog {
  text-align: left;
}
</style>